<template>
	<view class="main-cont box box-tb">
		<view class="stu-main task cous">
			<view class="" v-for="(stage,i) in cousList" :key="i">
				<view class="chapter box box-align-center box-pack-start">
					{{`第${stage.num}章 ${stage.title}`}}
				</view>
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox v-model="section.checked" :disabled="section.pub == '0'?false:true" v-for="(section, index) in stage.sectionList" :key="index"
						:name="section.id" :label-disabled="false">
						<view class="list box box-align-center box-pack-between">
							<view class="name box box-align-start box-pack-start">
								<view class="ml5 number" v-if="index<9">
									{{`0${section.num}`}}
								</view>
								<view class="ml5 number" v-else>
									{{`${section.num}`}}
								</view>
								<view class="ml10  box box-tb box-align-center box-pack-start">
									<view class="titles">
										{{section.title}}
									</view>
									<view class="time">
										{{section.time!=null?section.time:''}}
									</view>
								</view>
							</view>
							<view class="score">{{section.pub == '0'?`未发布`:`${section.wcrs}/${section.bjrs}`}}</view>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			
		</view>
		<view class="btn box box-align-center box-pack-between">
			<u-checkbox v-model="checkAll" @change="checkedAll">全选</u-checkbox>
			<view class="box box-align-center box-pack-center">
				<view class="mr20" @click="goback()">
					取消
				</view>
				<view class="reset-confirm-btn" @click="disableBtn == false?sure():``">
					发布
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Data:[{
					num:1,
					title:'节约用水',
					cousList:[{
						checked:false,
						pub:0,
						id:1,
						num:1,
						title:'谁的重要性',
						time:'14:56:00',
						wcrs:5,
						bjrs:20
					},
					{
						checked:false,
						pub:0,
						id:1,
						num:2,
						title:'谁的重要性',
						time:'14:56:00',
						wcrs:5,
						bjrs:20
					}],
				},
				{
					num:2,
					title:'节约用水',
					cousList:[{
						checked:false,
						pub:0,
						id:2,
						num:1,
						title:'水的重要性',
						time:'14:56:00',
						wcrs:5,
						bjrs:20
					}],
				}],
				bj:uni.getStorageSync('clazz'),
				user:uni.getStorageSync("user"),
				plan:{},
				cousList:[],
				checkAll:false,
				selectId: [],
				disableBtn:false
			};
		},
		onLoad() {
			this.pubCousList();
		},
		methods: {
			pubCousList(){
				let opts = {
					url: '/yclasscoustask/pubCousList',
					method: 'post'
				};
				let params = {
					classid: this.bj.id,
					schoolid: this.user.schoolId
				};
				this.$api.post(opts, params).then(res => {
					this.plan = res.plan;
					this.cousList = res.list;
				})
			},
			sure() {
				this.disableBtn = true;
				//提交选中的值
				if (this.selectId.length == 0) {
					this.$refs.uToast.show({
						title: '请选择课程任务',
						type: 'warning',
					})
					return false;
				}
				
				let opts = {
					url: '/yclasscoustask/pubCousTask',
					method: 'post'
				};
				let params = {
					classid:this.bj.id,
					planid: this.plan.id,
					cousid: this.plan.cousId,
					trid:this.user.id,
					csids:this.selectId
				};
				this.$api.post(opts, {str:JSON.stringify(params)}).then(res => {
					if(res.code == '0'){
						this.$refs.uToast.show({title: '发布成功',type: 'success',callback:(res=>{
							// uni.reLaunch({
							// 	url:'/pages/home/home'
							// })
							this.goback();
						})})
					}else{
						this.disableBtn = false;
						this.$refs.uToast.show({title: '发布失败',type: 'error'})
					}
				})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.selectId = e
				if(e.length == this.cousList.filter(res=>{return res.pub !='1'}).length){
					this.checkAll = true
				}else{
					this.checkAll = false
				}
			},
			//全选
			checkedAll() {
				if(this.checkAll == false){
					this.cousList.filter(res=>{return res.pub !='1'}).map(val => {
						val.checked = true;
					})
					this.selectId = this.cousList.filter(res=>{return res.pub !='1'}).map(val => {
						return val.id
					})
				}else{
					this.cousList.filter(res=>{return res.pub !='1'}).map(val => {
						val.checked = false;
					})
					this.selectId = []
				}
				
			},
			goback(){
				uni.navigateBack()
			}
		}
	};
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;

		.stu-main {
			box-sizing: border-box;
			width: 722rpx;
			height: 100%;
			margin: 20rpx auto 0;
			border-radius: 20px;
			padding-bottom: 200rpx;
			overflow-y: auto;

			.top {
				padding: 0 40rpx;
				height: 98rpx;
				margin-bottom: 2rpx solid #F0F1F8;

			}

			.title {
				width: 100%;
				height: 107rpx;
			}
		}
		
		.number {
			font-size: 36rpx;
			font-weight: blod;
			color: #AEB8CF;
		}
		.list {
			padding: 0 40rpx;
			height: 100%;
			
			.titles {
				width: 390rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #181623;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.time {
				width: 100%;
				font-size: 26rpx;
				color: #888F9E;
			}
		}
		.check {
			width: 100rpx;
		}
		.sort {
			text-align: center;
			width: 100rpx;
		}
		
		.name {
			text-align: left;
			width: 430rpx;
		}
		
		.score {
			text-align: right;
			width: 202rpx;
			color: #7F84E4;
			font-size: 26rpx;
		}
		.btn {
			position: fixed;
			bottom: 0;
			padding: 0 40rpx;
			width: 100%;
			height: 200rpx;
			background-color: rgba(255,255,255,.9);
			
			.reset-confirm-btn {
				width: 213rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				color: #fff;
			}
		}
		
		.chapter{
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
		}
	}
</style>
